<template>
  <div>
    <h4>2. 确认货件单的商品及其数量</h4>
    <div class="goods-table">

      <!-- 仓库 -->
      <el-table
        border
        :data="chooseWareGoodsList"
        :span-method="objectSpanMethod2"
        :key="currentShipmentType"
      >
        <el-table-column
          prop="image"
          :label="$t('table.productCover')"
          align="center"
          width="120"
        >
          <template slot-scope="{row}">
            <div class="img-box img-one">
              <img :src="row.image" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          :label="$t('table.title')"
          align="left"
          min-width="300"
        >
          <template slot-scope="{row}">
            {{row.title}}
            <div class="goods-SKU-info">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                >
                  {{attr.name}} : {{attr.value}}
                  <span class="attr-link"> | </span>
                </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.ListingIDAndSKU')"
          align="left"
          width="300"
        >
          <template slot-scope="{row}">
            <template v-if="row.isTB">
                  <span class="font-red">
                    {{$t('shipment.Not labeled')}} {{row.sku ? `(${row.sku})` : ''}}
                  </span>
            </template>
            <template v-else-if="row.isSystem">
              {{ $t('shipment.System label') }} ({{row.sku}})
            </template>
            <template v-else>
              {{row.goodsId}}{{row.sku ? `(${row.sku})` : ''}}
            </template>
          </template>
        </el-table-column>
        <m-l-code-column></m-l-code-column>
        <el-table-column
          :label="$t('table.SKU重量与尺寸')"
          prop="weight"
          align="left"
          width="150"
        >
          <template v-slot="{row}">
            <template v-if="row.isTB">
              -
            </template>
            <template v-else>
              {{row.weight}}kg ({{row.length}}×{{row.width}}×{{row.height}}cm)
            </template>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.货值（元）')"
          prop="goodsValue"
          align="left"
          width="150"
          v-if="false"
        ></el-table-column>
        <el-table-column
          label="箱规"
          prop="boxAttr"
          align="left"
          width="200"
        >
          <template v-slot="{row}">
            <goods-box-size :suit-id="row.suitId" :goods-row="row.boxAttr" :can-edit="false"></goods-box-size>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.是否需要组装')"
          prop="isCombination"
          align="center"
          width="150"
          v-if="showCombination"
        >
          <template v-slot="{row}">
            {{row.isCombination ? $t('common.是') : $t('common.否')}}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.预计入库数量（整箱/箱）')"
          width="200"
          prop="exGoodsNumBox"
        >
          <template slot-scope="{row}">
            {{row.exGoodsNumBox}}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.expectedReceiptQuantityMix')"
          width="200"
          prop="exGoodsMixinNum"
          v-if="showMixinGoodsNum"
        >
          <template slot-scope="{row}">
            {{row.exGoodsMixinNum}}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.exTotalGoodsNum')"
          width="200"
          prop="exTotalGoodsNum"
        >
          <template slot-scope="{row}">
            {{getExTotalGoodsNum(row.suitId)}}
          </template>
        </el-table-column>



      </el-table>
    </div>
    <div class="step-tips">
      <span>{{ $t('shipment.v2Step3Tips1') }}</span><br>
      <span>{{ $t('shipment.v2Step3Tips2') }}</span><br>
    </div>
  </div>
</template>


<script>
import GoodsBoxSize from "@/views/stock/components/GoodsBoxSize.vue";

const shipmentType = {
  oneStock: 'oneStock',
  middleStock: 'middleStock',
  mkdFull: 'mkdFull',
  mkdFullCBT: 'mkdFullCBT',
  falaFull: 'falaFull',
}

import MLCodeListColumn from "@/views/stock/components/MLCodeListColumn.vue";
import MLCodeColumn from "@/views/stock/components/MLCodeColumn.vue";
import {getPlatformShortNameByAccountNum, getPlatformTextColor} from "@/utils";

export default {
  components: {GoodsBoxSize, MLCodeColumn, MLCodeListColumn},
  name: 'addShipmentStep2',
  props: {
    chooseGoodsList: {
      type: Array,
    },
    chooseWareGoodsList: {
      type: Array,
    },
    currentForm: {
      type: Object,
    },
    currentShipmentType: {
      type: String,
    },
    showCombination: {
      type: Boolean,
      default: true,
    },
    showMixinGoodsNum: {
      type: Boolean,
      default: true,
    }
  },
  data(){
    return {
      shipmentType,
    }
  },
  methods: {
    getPlatformShortNameByAccountNum,
    getPlatformTextColor,
    objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
      const mergeCell = this.getMergeCell(this.chooseWareGoodsList)
      if(mergeCell[column.property]){
        if(mergeCell[column.property][rowIndex]) {
          return [mergeCell[column.property][rowIndex], 1]
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },
    getMergeCell(list){
      const mergeObj = {};
      // 根据suitId合并的字段
      const mergeFieldArr = [
        'image',
        'title',
        'goodsNumInBox',
        'exTotalGoodsNum',
        'goodsValue',
        'isCombination',
        'weight',
        'boxAttr',
      ];

      mergeFieldArr.forEach(key=>{
        mergeObj[key] = [1];
      })

      let mergeFieldKey = 0;
      list.forEach((item,index)=>{
        // 第一列数据不处理
        if(index === 0){
          return;
        }
        // 根据suitId 合并


        if(item.suitId && item.suitId === list[index - 1].suitId){
          mergeFieldArr.forEach(key=>{
            mergeObj[key][mergeFieldKey] += 1;
            mergeObj[key].push(0); // 添加一个0 站位
          })
        }else{
          mergeFieldKey = index; // 记录当前行
          mergeFieldArr.forEach(key=>{
            mergeObj[key].push(1); // 添加一个1
          })
        }
      })

      return mergeObj;
    },
    // 预计入库商品总数
    getExTotalGoodsNum(suitId){
      let num = 0
      this.chooseWareGoodsList.filter(item=> item.suitId === suitId)
        .forEach(item=>{
          const num1 = item.goodsNumInBox * item.exGoodsNumBox // 箱装数数量
          const num2 = item.exGoodsMixinNum
          if(num1){
            num += num1
          }
          if(num2){
            num += num2
          }
        })
      return num
    },
  },
}
</script>

<style scoped lang="scss">
.step-tips{
  margin-top: 10px;
  font-size: 12px;
  color: #AAAAAA;
}

</style>
